$(document).ready(function() {
    // 表单提交按钮
    let submitButton = $("input[type='submit']")
    // 用户名格式判断 false代表不符合格式 true代表符合
    let usernameValid = true
    // 密码格式判断 false代表不符合格式 true代表符合
    let passwordValid = true
    // 确认密码判断 false代表不一致 true代表一致
    let confirmPasswordValid = true
    // 邮箱格式判断 false代表不符合格式 true代表符合
    let emailValid = true

    // 监听用户名输入框失去焦点
    $("#username").blur(function () {
        let username = $(this).val()
        // 保存当前this对象
        let inputElement = $(this)
        // 判断用户名是否重复
        // 发送GET请求的URL
        let url = "/checkUsername?username=" + username
        $.get(url, function (res) {
            if (res === "true") {
                // 返回数据为true 代表用户名重复
                inputElement.after('<label class="warning-message msg-username" >用户名已存在</label>')
                usernameValid = false
            }
        })
        // 正则表达式判断用户名格式 只能使用英文、数字、下划线和短横线 最少4个字符，最多16个字符
        if (!/^[A-Za-z0-9_-]{4,16}$/.test(username)) {
            $(".msg-username").remove()
            usernameValid = false
            inputElement.after('<label class="warning-message msg-username" >用户名格式不正确</label>')
        } else {
            usernameValid = true
            $(".msg-username").remove()
        }
        if (username.length === 0) {
            usernameValid = true
            $(".msg-username").remove()
        }
        updateSubmitButtonState()
    })

    // 监听密码输入框失去焦点
    $("#password").blur(function () {
        let password = $(this).val()
        // 保存当前this对象
        let inputElement = $(this)
        // 正则表达式判断密码格式 只能使用英文、数字、下划线和短横线 最少6个字符，最多16个字符
        if (!/^[A-Za-z0-9_-]{6,16}$/.test(password)) {
            passwordValid = false
            $(".msg-password").remove()
            inputElement.after('<label class="warning-message msg-password" >密码格式不正确</label>')
        } else {
            passwordValid = true
            $(".msg-password").remove()
        }
        if (password.length === 0) {
            passwordValid = true
            $(".msg-password").remove()
        }
        updateSubmitButtonState()
    })

    // 监听确认密码输入框失去焦点
    $("#confirm_password").blur(function () {
        let password = $("#password").val()
        let confirmPassword = $(this).val()
        // 保存当前this对象
        let inputElement = $(this)
        if (password !== confirmPassword) {
            confirmPasswordValid = false
            $(".msg-confirm-password").remove()
            inputElement.after('<label class="warning-message msg-confirm-password" >两次密码不一致</label>')
        } else {
            confirmPasswordValid = true
            $(".msg-confirm-password").remove()
        }
        if (confirmPassword.length === 0) {
            confirmPasswordValid = true
            $(".msg-confirm-password").remove()
        }
        updateSubmitButtonState()
    })

    // 监听邮箱输入框失去焦点
    $("#email").blur(function () {
        let email = $(this).val()
        // 保存当前this对象
        let inputElement = $(this)
        // 正则表达式判断邮箱格式
        if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(email)) {
            emailValid = false
            $(".msg-email").remove()
            inputElement.after('<label class="warning-message msg-email" >邮箱格式不正确</label>')
        } else {
            emailValid = true
            $(".msg-email").remove()
        }
        if (email.length === 0) {
            emailValid = true
            $(".msg-email").remove()
        }
        updateSubmitButtonState()
    })

    // 更新提交按钮状态
    function updateSubmitButtonState() {
        if (usernameValid && passwordValid && confirmPasswordValid && emailValid) {
            submitButton.prop("disabled", false)
        } else {
            submitButton.prop("disabled", true)
        }
    }
})